<!--
 * @Descripttion: 图片
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 14:18:01
 * @LastEditors: GW
 * @LastEditTime: 2021-10-13 10:50:17
-->
<template>
    <section class="show-wrapper" :style="data.onPadding?'':{'padding':'0px'}">
        <template v-if="data.src">
            <div class="picture-box">
                <a :href="data.href" class="image-box">
                    <img :src="data.src" :alt="data.title">
                </a>
                <div :style="data.style">
                    {{data.text}}
                </div>
            </div>
        </template>
        <template v-else>
            <div class="picture-box-null">
                <a-icon class="ico" type="picture" />
            </div>
            <div :style="data.style">
                {{data.text}}
            </div>
        </template>

    </section>
</template>

<script>
export default {
    name: 'Picture',
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    mounted () {
        //组件默认数据
        let { data } = this;
        let defaultData = {
            title: data.title ? data.title : '图片',
            onEdit: false,
        }
        this.data = Object.assign(data, defaultData);
    }
}
</script>

<style lang="less" scoped>
    .show-wrapper {
        padding:6px 12px;
        .picture-box-null {
            height: 200px;
            line-height: 200px;
            background: #eee;
            text-align: center;
            .ico {
                font-size: 56px;
                color: #ccc;
            }
        }
        .picture-box {
            position: relative;
            width: 100%;
            a {
                display: block;
            }
            img {
                width: 100%;
            }
            .image-box {
                width: 100%;
            }
        }
    }
</style>
<style scoped>
    .ant-input {
        border-radius: 0 !important;
    }
</style>